<template>
  <div data-v-24bd452c="" data-v-70d8618b="" class="voice voice-wrap" style="width: 90px">
    <div data-v-24bd452c="" class="background" style="background-color: rgb(22, 31, 52);"></div>
    <div @click="togglePlayPause">
      <div data-v-24bd452c="" class="voice-wavy-line" :class="{ playing: isPlaying }" style="margin-left: 0px;">
        <span data-v-24bd452c=""></span>
        <span data-v-24bd452c=""></span>
        <span data-v-24bd452c=""></span>
        <span data-v-24bd452c=""></span>
        <span data-v-24bd452c=""></span>
        <span data-v-24bd452c=""></span>
        <span data-v-24bd452c=""></span>
        <span data-v-24bd452c=""></span>
        <span data-v-24bd452c=""></span>
      </div>
    </div>
    <p data-v-24bd452c="">{{ audioDuration }}"</p>
    <audio :src="audioUrl" preload="auto" ref="audioElement" @ended="audioEnded"></audio>
  </div>
</template>

<script>
export default {
  name: "VoiceComponent",
  props: {
    audioUrl: String,
  },
  data() {
    return {
      isPlaying: false,
      audioDuration: 0,
    };
  },
  methods: {
    togglePlayPause() {
      const audio = this.$refs.audioElement;
      if (audio) {
        if (this.isPlaying) {
          audio.pause();// 如果正在播放，暂停声音
        } else {
          audio.play();// 如果未播放，播放声音
        }
        this.isPlaying = !this.isPlaying;// 切换播放状态
      }
    },
    audioEnded() {
      // 音频播放完毕时触发此事件
      this.isPlaying = false; // 设置播放状态为 false，停止动画
    },
  },
  mounted() {
    const audio = this.$refs.audioElement;
    if (audio) {
      audio.addEventListener('loadedmetadata', () => {
        this.audioDuration = Math.round(audio.duration); // 将音频时长存储到属性中
      });
    }
  },
};
</script>


<style scoped>
/*声波样式*/
@-webkit-keyframes playing-line-1-data-v-24bd452c {
  0%, to {
    -webkit-transform: scaleY(.33333);
    transform: scaleY(.33333)
  }

  25% {
    -webkit-transform: scaleY(.66);
    transform: scaleY(.66)
  }

  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
  }

  75% {
    -webkit-transform: scaleY(.66);
    transform: scaleY(.66)
  }
}

@-moz-keyframes playing-line-1-data-v-24bd452c {
  0%, to {
    -moz-transform: scaleY(.33333);
    transform: scaleY(.33333)
  }

  25% {
    -moz-transform: scaleY(.66);
    transform: scaleY(.66)
  }

  50% {
    -moz-transform: scaleY(1);
    transform: scaleY(1)
  }

  75% {
    -moz-transform: scaleY(.66);
    transform: scaleY(.66)
  }
}

@-o-keyframes playing-line-1-data-v-24bd452c {
  0%, to {
    -o-transform: scaleY(.33333);
    transform: scaleY(.33333)
  }

  25% {
    -o-transform: scaleY(.66);
    transform: scaleY(.66)
  }

  50% {
    -o-transform: scaleY(1);
    transform: scaleY(1)
  }

  75% {
    -o-transform: scaleY(.66);
    transform: scaleY(.66)
  }
}

@keyframes playing-line-1-data-v-24bd452c {
  0%, to {
    -webkit-transform: scaleY(.33333);
    -moz-transform: scaleY(.33333);
    -o-transform: scaleY(.33333);
    transform: scaleY(.33333)
  }

  25% {
    -webkit-transform: scaleY(.66);
    -moz-transform: scaleY(.66);
    -o-transform: scaleY(.66);
    transform: scaleY(.66)
  }

  50% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1)
  }

  75% {
    -webkit-transform: scaleY(.66);
    -moz-transform: scaleY(.66);
    -o-transform: scaleY(.66);
    transform: scaleY(.66)
  }
}

@-webkit-keyframes playing-line-2-data-v-24bd452c {
  0%, to {
    -webkit-transform: scaleY(.66667);
    transform: scaleY(.66667)
  }

  25% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
  }

  50% {
    -webkit-transform: scaleY(.66667);
    transform: scaleY(.66667)
  }

  75% {
    -webkit-transform: scaleY(.33);
    transform: scaleY(.33)
  }
}

@-moz-keyframes playing-line-2-data-v-24bd452c {
  0%, to {
    -moz-transform: scaleY(.66667);
    transform: scaleY(.66667)
  }

  25% {
    -moz-transform: scaleY(1);
    transform: scaleY(1)
  }

  50% {
    -moz-transform: scaleY(.66667);
    transform: scaleY(.66667)
  }

  75% {
    -moz-transform: scaleY(.33);
    transform: scaleY(.33)
  }
}

@-o-keyframes playing-line-2-data-v-24bd452c {
  0%, to {
    -o-transform: scaleY(.66667);
    transform: scaleY(.66667)
  }

  25% {
    -o-transform: scaleY(1);
    transform: scaleY(1)
  }

  50% {
    -o-transform: scaleY(.66667);
    transform: scaleY(.66667)
  }

  75% {
    -o-transform: scaleY(.33);
    transform: scaleY(.33)
  }
}

@keyframes playing-line-2-data-v-24bd452c {
  0%, to {
    -webkit-transform: scaleY(.66667);
    -moz-transform: scaleY(.66667);
    -o-transform: scaleY(.66667);
    transform: scaleY(.66667)
  }

  25% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1)
  }

  50% {
    -webkit-transform: scaleY(.66667);
    -moz-transform: scaleY(.66667);
    -o-transform: scaleY(.66667);
    transform: scaleY(.66667)
  }

  75% {
    -webkit-transform: scaleY(.33);
    -moz-transform: scaleY(.33);
    -o-transform: scaleY(.33);
    transform: scaleY(.33)
  }
}

@-webkit-keyframes playing-line-3-data-v-24bd452c {
  0%, to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
  }

  25% {
    -webkit-transform: scaleY(.66);
    transform: scaleY(.66)
  }

  50% {
    -webkit-transform: scaleY(.33333);
    transform: scaleY(.33333)
  }

  75% {
    -webkit-transform: scaleY(.66);
    transform: scaleY(.66)
  }
}

@-moz-keyframes playing-line-3-data-v-24bd452c {
  0%, to {
    -moz-transform: scaleY(1);
    transform: scaleY(1)
  }

  25% {
    -moz-transform: scaleY(.66);
    transform: scaleY(.66)
  }

  50% {
    -moz-transform: scaleY(.33333);
    transform: scaleY(.33333)
  }

  75% {
    -moz-transform: scaleY(.66);
    transform: scaleY(.66)
  }
}

@-o-keyframes playing-line-3-data-v-24bd452c {
  0%, to {
    -o-transform: scaleY(1);
    transform: scaleY(1)
  }

  25% {
    -o-transform: scaleY(.66);
    transform: scaleY(.66)
  }

  50% {
    -o-transform: scaleY(.33333);
    transform: scaleY(.33333)
  }

  75% {
    -o-transform: scaleY(.66);
    transform: scaleY(.66)
  }
}

@keyframes playing-line-3-data-v-24bd452c {
  0%, to {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1)
  }

  25% {
    -webkit-transform: scaleY(.66);
    -moz-transform: scaleY(.66);
    -o-transform: scaleY(.66);
    transform: scaleY(.66)
  }

  50% {
    -webkit-transform: scaleY(.33333);
    -moz-transform: scaleY(.33333);
    -o-transform: scaleY(.33333);
    transform: scaleY(.33333)
  }

  75% {
    -webkit-transform: scaleY(.66);
    -moz-transform: scaleY(.66);
    -o-transform: scaleY(.66);
    transform: scaleY(.66)
  }
}

@-webkit-keyframes steletonLoading-data-v-24bd452c {
  0% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

@-moz-keyframes steletonLoading-data-v-24bd452c {
  0% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

@-o-keyframes steletonLoading-data-v-24bd452c {
  0% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

@keyframes steletonLoading-data-v-24bd452c {
  0% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

.voice[data-v-24bd452c] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 1;
  height: 40px;
  max-height: 100%;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer
}

.voice .background[data-v-24bd452c] {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px
}

.voice .control[data-v-24bd452c] {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 50%;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  background-color: #fff
}

.voice .voice-wavy-line[data-v-24bd452c] {
  position: relative;
  z-index: 1;
  height: 18px;
  margin-left: 24px;
  margin-right: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.voice .voice-wavy-line > span[data-v-24bd452c] {
  width: 2px;
  height: 15px;
  margin: 0 1px;
  background: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

.voice .voice-wavy-line > span[data-v-24bd452c]:first-child {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}

.voice .voice-wavy-line > span[data-v-24bd452c]:nth-child(2) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice .voice-wavy-line > span[data-v-24bd452c]:nth-child(4) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice .voice-wavy-line > span[data-v-24bd452c]:nth-child(5) {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}

.voice .voice-wavy-line > span[data-v-24bd452c]:nth-child(6) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice .voice-wavy-line > span[data-v-24bd452c]:nth-child(8) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice .voice-wavy-line > span[data-v-24bd452c]:nth-child(9) {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}

.voice .voice-wavy-line.playing[data-v-24bd452c] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c] {
  width: 2px;
  height: 15px;
  margin: 0 1px;
  background: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:first-child {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(2) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(4) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(5) {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(6) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(8) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(9) {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:first-child {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-1-data-v-24bd452c;
  -moz-animation-name: playing-line-1-data-v-24bd452c;
  -o-animation-name: playing-line-1-data-v-24bd452c;
  animation-name: playing-line-1-data-v-24bd452c
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(2) {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -o-animation-delay: .1s;
  animation-delay: .1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-2-data-v-24bd452c;
  -moz-animation-name: playing-line-2-data-v-24bd452c;
  -o-animation-name: playing-line-2-data-v-24bd452c;
  animation-name: playing-line-2-data-v-24bd452c
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(3) {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -o-animation-delay: .2s;
  animation-delay: .2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-3-data-v-24bd452c;
  -moz-animation-name: playing-line-3-data-v-24bd452c;
  -o-animation-name: playing-line-3-data-v-24bd452c;
  animation-name: playing-line-3-data-v-24bd452c
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(4) {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -o-animation-delay: .3s;
  animation-delay: .3s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-2-data-v-24bd452c;
  -moz-animation-name: playing-line-2-data-v-24bd452c;
  -o-animation-name: playing-line-2-data-v-24bd452c;
  animation-name: playing-line-2-data-v-24bd452c
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(5) {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
  -o-animation-delay: .4s;
  animation-delay: .4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-1-data-v-24bd452c;
  -moz-animation-name: playing-line-1-data-v-24bd452c;
  -o-animation-name: playing-line-1-data-v-24bd452c;
  animation-name: playing-line-1-data-v-24bd452c
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(6) {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: .5s;
  -moz-animation-delay: .5s;
  -o-animation-delay: .5s;
  animation-delay: .5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-2-data-v-24bd452c;
  -moz-animation-name: playing-line-2-data-v-24bd452c;
  -o-animation-name: playing-line-2-data-v-24bd452c;
  animation-name: playing-line-2-data-v-24bd452c
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(7) {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  -o-animation-delay: .6s;
  animation-delay: .6s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-3-data-v-24bd452c;
  -moz-animation-name: playing-line-3-data-v-24bd452c;
  -o-animation-name: playing-line-3-data-v-24bd452c;
  animation-name: playing-line-3-data-v-24bd452c
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(8) {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: .7s;
  -moz-animation-delay: .7s;
  -o-animation-delay: .7s;
  animation-delay: .7s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-2-data-v-24bd452c;
  -moz-animation-name: playing-line-2-data-v-24bd452c;
  -o-animation-name: playing-line-2-data-v-24bd452c;
  animation-name: playing-line-2-data-v-24bd452c
}

.voice .voice-wavy-line.playing > span[data-v-24bd452c]:nth-child(9) {
  -webkit-animation-duration: .8s;
  -moz-animation-duration: .8s;
  -o-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-delay: .8s;
  -moz-animation-delay: .8s;
  -o-animation-delay: .8s;
  animation-delay: .8s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: playing-line-1-data-v-24bd452c;
  -moz-animation-name: playing-line-1-data-v-24bd452c;
  -o-animation-name: playing-line-1-data-v-24bd452c;
  animation-name: playing-line-1-data-v-24bd452c
}

.voice p[data-v-24bd452c] {
  position: relative;
  z-index: 1
}

.voice .loading[data-v-24bd452c] {
  width: 16px;
  height: 16px
}

.voice audio[data-v-24bd452c] {
  position: absolute;
  z-index: 0;
  left: -1000px;
  top: -1000px;
  width: 1px;
  height: 1px;
  visibility: hidden;
  opacity: 0
}

.voice.light[data-v-24bd452c] {
  color: #636d86
}

.voice.light .background[data-v-24bd452c] {
  background: #f9f9f9;
  border: 1px solid #e8eaee
}

.voice.light .voice-wavy-line[data-v-24bd452c] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.voice.light .voice-wavy-line > span[data-v-24bd452c] {
  width: 2px;
  height: 15px;
  margin: 0 1px;
  background: #636d86;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

.voice.light .voice-wavy-line > span[data-v-24bd452c]:first-child {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}

.voice.light .voice-wavy-line > span[data-v-24bd452c]:nth-child(2) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice.light .voice-wavy-line > span[data-v-24bd452c]:nth-child(4) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice.light .voice-wavy-line > span[data-v-24bd452c]:nth-child(5) {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}

.voice.light .voice-wavy-line > span[data-v-24bd452c]:nth-child(6) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice.light .voice-wavy-line > span[data-v-24bd452c]:nth-child(8) {
  -webkit-transform: scaleY(.75);
  -moz-transform: scaleY(.75);
  -ms-transform: scaleY(.75);
  -o-transform: scaleY(.75);
  transform: scaleY(.75)
}

.voice.light .voice-wavy-line > span[data-v-24bd452c]:nth-child(9) {
  -webkit-transform: scaleY(.5);
  -moz-transform: scaleY(.5);
  -ms-transform: scaleY(.5);
  -o-transform: scaleY(.5);
  transform: scaleY(.5)
}
</style>